<template>
	<view>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>

		<u-cell-group :border="false">
			<u-cell title="头像" isLink @click="upload">
				<u-avatar slot="value" :src="userInfo.headImage || userInfo.memberNumber"></u-avatar>
			</u-cell>
			<u-cell title="用户名" :value="userInfo.memberName" @click="handlerMemberName"></u-cell>
			<u-cell title="昵称" isLink :value="userInfo.nickName || '请设置'" @click="nickNameShow = true"></u-cell>
			<u-cell title="性别" isLink :value="getGenderName(userInfo.gender)" @click="genderShow = true"></u-cell>
			<u-cell title="生日" isLink :value="userInfo.birthday || '请设置'" @click="birthdayShow = true"></u-cell>
		</u-cell-group>
		<!-- 昵称修改 -->
		<u-popup :show="nickNameShow" @close="nickNameClose">
			<view class="nickNamePopup">
				<view class="toolbar">
					<view class="cancel" @click="nickNameClose">取消</view>
					<view class="title">请修改昵称</view>
					<view class="confirm" @click="nickNameConfirm">确定</view>
				</view>
				<view class="input">
					<u--input v-model="nickName" placeholder="请输入您的昵称" clearable></u--input>
				</view>
			</view>
		</u-popup>
		<!-- 生日选择 -->
		<u-datetime-picker :show="birthdayShow" v-model="birthday" mode="date" title="请选择您的生日"
			:closeOnClickOverlay="true" @close="birthdayClose" @cancel="birthdayClose" @confirm="birthdayConfirm"
			:minDate="-1577923200000" :maxDate="Number(new Date())" confirmColor="#DE2E2E"></u-datetime-picker>
		<!-- 性别选择 -->
		<u-picker :show="genderShow" :columns="genderList" keyName="label" title="请选择您的性别" :defaultIndex="gender"
			confirmColor="#DE2E2E" :closeOnClickOverlay="true" @close="genderClose" @cancel="genderClose"
			@confirm="genderConfirm">
		</u-picker>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		clearMember,
		updateMember
	} from '@/config/api';
	export default {
		data() {
			return {
				nickNameShow: false, // 显示昵称设置
				birthdayShow: false, // 显示生日选择
				genderShow: false, // 显示性别选择
				birthday: '',
				nickName: '',
				gender: [],
				genderList: [
					[{
						label: '保密',
						key: 0
					}, {
						label: '男',
						key: 1
					}, {
						label: '女',
						key: 2
					}]
				]
			};
		},
		computed: {
			...mapState(['userInfo'])
		},
		onShow() {
			// 验证是否登录
			this.$loginCheck();
			if (this.userInfo.nickName) {
				this.nickName = this.userInfo.nickName;
			}
			if (this.userInfo.birthday) {
				this.birthday = new Date(this.userInfo.birthday).getTime();
			} else {
				this.birthday = Number(new Date());
			}
			if (this.userInfo.gender) {
				this.gender = [this.userInfo.gender]
			} else {
				this.gender = [0]
			}
		},
		methods: {
			// 退出登录
			logOut() {
				// #ifndef APP-PLUS
				uni.showModal({
					title: "操作提示",
					content: "确定退出登录吗？",
					confirmText: "确定",
					cancelText: "取消",
					confirmColor: "#0E9C98",
					cancelColor: "#999999",
					success: (res) => {
						if (res.confirm) {
							clearMember().then(() => {
								this.$store.commit("emptyUserInfo");
								uni.navigateBack();
							});
						}
					}
				});
				// #endif
				// #ifdef APP-PLUS
				uni.$showModal({
					title: "操作提示",
					confirmVal: '确定',
					cancelVal: '取消',
					content: '确定退出登录吗？',
				}).then(res => {
					clearMember().then(() => {
						this.$store.commit("emptyUserInfo");
						uni.navigateBack();
					});
				});
				// #endif
			},
			// 点击用户名
			handlerMemberName() {
				uni.$u.toast('用户名不支持修改');
			},
			// 上传头像
			upload() {
				// console.log("上传图片");
				const userToken = uni.getStorageSync('userToken');
				if (userToken) {
					uni.chooseImage({
						count: 1,
						sizeType: ['original', 'compressed'],
						sourceType: ['album', 'camera'],
						success: (chooseImageRes) => {
							const tempFilePaths = chooseImageRes.tempFilePaths;
							uni.showLoading({
								title: '图片上传中...'
							});
							uni.uploadFile({
								// #ifdef H5
								url: '/api/approve/members/memberUploadImage',
								// #endif
								// #ifndef 	H5
								url: this.$base.baseUrl + '/approve/members/memberUploadImage',
								// #endif
								filePath: tempFilePaths[0],
								name: 'file',
								header: {
									userToken: userToken
								},
								success: (res) => {
									uni.hideLoading();
									res = JSON.parse(res.data);
									if (res.code == 200 && res.success) {
										this.submit('headImage', res.data.link, () => {
											uni.$u.toast('修改头像成功');
										});
									} else {
										uni.showToast({
											title: '上传失败',
											icon: 'error'
										});
									}
								},
								fail: (res) => {
									console.log(res)
									uni.showToast({
										title: '上传失败',
										icon: 'error'
									});
								}
							});
						}
					});
				}
			},
			// 修改用户资料
			submit(key, value, callback) {
				const params = {};
				params[key] = value;
				const config = {
					header: {
						'Content-Type': 'application/json'
					}
				}
				updateMember(params, config).then((res) => {
					let userInfo = {
						...res,
						token: true, //token用于判断是否登录
					}
					this.$store.commit('setUserInfo', userInfo);
					callback && callback(res);
				})
			},
			// 关闭修改昵称
			nickNameClose() {
				this.nickNameShow = false;
			},
			// 修改昵称
			nickNameConfirm() {
				if (this.nickName !== this.userInfo.nickName) {
					this.submit('nickName', this.nickName, () => {
						this.nickNameShow = false;
						uni.$u.toast('修改昵称成功');
					});
				} else {
					this.nickNameShow = false;
				}
			},
			// 得到性别
			getGenderName(key) {
				let str = "";
				switch (key) {
					case 0:
						str = "保密";
						break;
					case 1:
						str = "男";
						break;
					case 2:
						str = "女";
						break;
					default:
						str = "未知";
						break;
				}
				return str
			},
			// 关闭性别选择
			genderClose() {
				this.genderShow = false;
			},
			// 提交性别选择
			genderConfirm(e) {
				if (e.value[0].key !== this.userInfo.gender) {
					this.submit('gender', e.value[0].key, () => {
						this.genderShow = false;
						uni.$u.toast('修改性别成功');
					});
				} else {
					this.genderShow = false;
				}
			},
			birthdayClose() {
				this.birthdayShow = false;
			},
			birthdayConfirm(e) {
				const birthday = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
				if (birthday !== this.userInfo.birthday) {
					this.submit('birthday', birthday, () => {
						this.birthdayShow = false;
						uni.$u.toast('修改生日成功');
					});
				} else {
					this.birthdayShow = false;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep.u-cell-group {
		background-color: #FFFFFF;
	}

	.avatar {
		display: flex;
		align-items: center;

		.name {
			margin-left: 20rpx;
			font-size: 30rpx;
		}
	}

	.button {
		margin: 5%;
	}

	.nickNamePopup {
		padding: 0 50rpx;

		.toolbar {
			height: 42px;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			.cancel {
				color: #909193;
				font-size: 28rpx;
			}

			.title {
				font-size: 30rpx;
			}

			.confirm {
				color: $u-error;
				font-size: 28rpx;
			}
		}

		.input {
			margin: 50rpx 0 140rpx 0;
		}
	}
</style>
